<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--图片logo区域-->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt="">
            </div>
            <!--登录表单区域  :rules="rules"  表单校验对象 -->
            <el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="loginFormRules">
                <!--用户名  prop 指定验证规则-->
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password"
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <!--验证码-->
                <el-form-item prop="code">
                    <el-input prefix-icon="el-icon-key" v-model="loginForm.code" placeholder="点击图片切换验证码"
                              style="width: 300px; margin-right: 10px"></el-input>
                    <img :src="captchaUrl" @click="getCaptcha" alt="" width="100" height="40" style="float: right;">
                </el-form-item>
                <!--按钮区域-->
                <el-form-item>
                    <el-button type="primary" class="btn"  @click="formSubmit">登录</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script>
    import {getCode,login} from "@/request/api";
    export default {
        name: 'LoginView',
        data() {
            return {
                captchaUrl: "",
                loginFormRules: {  // 表单验证规则对象
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 0, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                },
                loginForm: {   // 表单数据对象
                    username: '',
                    password: '',
                    code: '',
                    imguuid: ''
                }
            }
        },
        methods: {
          formSubmit() {
            this.$refs.loginFormRef.validate(valid => {
              if (!valid) return;  //  表单校验不通过
              //  发送异步请求   1.this.$http.get()
              // 2.发送异步请求
              login(this.loginForm).then(response => {
                // 保存token
                if (response.code==200){
                  window.sessionStorage.setItem("token", response.data.token)
                  window.sessionStorage.setItem("nickName", response.data.nickName)
                  this.$message({
                    type:'success',
                    message:response.msg,
                    onClose:()=>{
                      //  切换路由 到主页面
                      window.location.href = '/'
                    }
                  })
                  return
                }
                this.$message.error(response.msg)
              }).catch(error => {
                this.$message.error("请求失败!!!")
              })

            })
          },
            // 获取验证码
            getCaptcha(){
                // 发送异步请求  请求验证码  response   ->responseResult
                getCode().then(response=>{
                    //将 response.data.data.img  图片base64字符串
                    this.captchaUrl="data:image/jpeg;base64,"+response.data.img
                    this.loginForm.imguuid = response.data.imguuid
                }).catch(err=>{
                    this.$message.error('验证码请求失败!!!');
                })

            }
        },
        created() {
            this.getCaptcha()

        }
    }
</script>

<style scoped>

    .login_container {
        background-color: rgb(26, 160, 148);
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 380px;
        background-color: #fff;
        border-radius: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 15px #fff;
    }

    .login_box > .avatar_box {
        height: 70px;
        width: 70px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 2px 2px 20px #2b4b6b;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
    }

    .avatar_box > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: scale(1.3);
    }

    .avatar_box:hover {
        transform: translate(-50%, -50%) rotate(360deg);
        transition: transform 0.5s linear;
        cursor: pointer;
    }

    .btn {
        width: 100%;
    }

    .login_form {
        position: absolute;
        bottom: 30px;
        border-bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
</style>
